.cdk-global-overlay-wrapper,
.cdk-overlay-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;
  pointer-events: none;
}

.cdk-overlay-container {
  position: fixed;
  z-index: $zindex-overlay;
}

.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  position: absolute;
  z-index: $zindex-modal;
  display: flex;
}

.cdk-overlay-pane {
  position: absolute;
  z-index: $zindex-modal;
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  pointer-events: auto;
}

// TODO: overlay关闭时，backdrop的动效未生效，后续更改
.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-mask;
  opacity: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition-property: opacity;
  transition-timing-function: $motion-func-ease-in-out;
  transition-duration: $motion-duration-sm;
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;

  &.cdk-overlay-modal-backdrop {
    transition-duration: $motion-duration-md;
  }
}

@media screen and (-ms-high-contrast: active) {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0.6;
  }
}

.cdk-overlay-dark-backdrop {
  background: $overlay-backdrop-bg-color;
}

.cdk-overlay-transparent-backdrop,
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: $zindex-modal;
  display: flex;
  flex-direction: column;
  min-width: 0.01rem;
  min-height: 0.01rem;
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}
